<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>学习单元列表</title>
  <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/easyui/css/demo.css}">
  <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
  <script type="text/javascript" th:src="@{/easyui/js/validateExtends.js}"></script>>
</head>
<body>
<h2>学习单元列表</h2>
<table id="unitTable" title="学习单元" class="easyui-datagrid" style="width:700px;height:400px"
       url="/learningunit/getUnitList" pagination="true" rownumbers="true" singleSelect="true">
  <thead>
  <tr>
    <th field="unitTitle" width="50">单元标题</th>
    <th field="unitIntroduce" width="50">单元介绍</th>
    <th field="status" width="50">状态</th>
    <th field="learningScore" width="50">学习分数</th>
  </tr>
  </thead>
</table>
<button onclick="openAddUnitDialog()">添加学习单元</button>

<div id="addUnitDialog" class="easyui-dialog" title="添加学习单元" style="width:400px;height:300px;padding:10px" closed="true">
  <form id="addUnitForm">
    <div>
      <label>单元标题:</label>
      <input name="unitTitle" class="easyui-textbox" required="true"><br>
      <label>单元介绍:</label>
      <input name="unitIntroduce" class="easyui-textbox"><br>
      <label>学习分数:</label>
      <input name="learningScore" class="easyui-numberbox"><br>
      <label>状态:</label>
      <input name="status" class="easyui-combobox" data-options="valueField:'value',textField:'text',data:[{'value':'active','text':'激活'},{'value':'inactive','text':'未激活'}]"><br>
    </div>
  </form>
  <div style="text-align:center;margin-top:20px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitAddUnit()">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#addUnitDialog').dialog('close')">取消</a>
  </div>
</div>

<script type="text/javascript">
  function openAddUnitDialog() {
    $('#addUnitDialog').dialog('open');
  }

  function submitAddUnit() {
    $('#addUnitForm').form('submit', {
      url: '/learningunit/addUnit',
      onSubmit: function() {
        return $(this).form('validate');
      },
      success: function(result) {
        result = JSON.parse(result);
        if (result.success) {
          $('#unitTable').datagrid('reload');
          $('#addUnitDialog').dialog('close');
        } else {
          alert(result.message);
        }
      }
    });
  }
</script>
</body>
</html>